<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" >

	<ui:composition template="/templates/gerenciamento.xhtml" >
		<ui:define name="js">
			<h:outputScript library="js" name="jquery.maskedinput-1.2.2.min.js" target="body" />
		</ui:define>
		<ui:define name="css">
			<link rel="stylesheet" type="text/css" href="style/folha_gerenciamento.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/logado.css" media="screen" />
			<link rel="stylesheet" type="text/css" href="style/styles.css" media="screen" />
			<style type="text/css">
			body {
				margin-left: 0px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
			}
			</style>
		</ui:define>
		<ui:define name="mid">
			<h:form id="formmask">
			
				<a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" /> 
				<rich:popupPanel id="statPane" autosized="true"> 
					<h:outputText value="Aguarde..." styleClass="output-style"/> 
				</rich:popupPanel> 
				
				<div id='cssmenu'>
					<ul>
						
						<li class='active '>
							<a4j:commandLink>
								<span>HISTÓRICO</span>
							</a4j:commandLink>	
						</li>
						
						<li>
							<a4j:commandLink action="#{logadoBean.goGerenciamentoMeuUsaCardRecarregueSeuCartao}" >
								<span>RECARREGUE SEU CARTÃO</span>
							</a4j:commandLink>
						</li>
						<li>
							<a4j:commandLink action="#{logadoBean.goGerenciamentoMeuUsaCardGerencieSeuCartao}" >
								<span>GERENCIE SEU CARTÃO</span>
							</a4j:commandLink>
						</li>
						<li>
							<a4j:commandLink action="#{logadoBean.goGerenciamentoEditarPerfil}">
								<span>PERFIL</span>
							</a4j:commandLink>
						</li>
					</ul>
				</div>
				<div class="inside_extrato">
				
					<div class="extrato_referencia">
				    <div class="extrato_referencia_p1" align="right">Referência</div>
				    <div class="extrato_referencia_p2">
				      	<h:selectOneMenu value="#{homeGerenciaBean.referenciaEscolhida}" style="width:120px"> 
							<f:selectItems value="#{homeGerenciaBean.referencias}" /> 
							<f:ajax event="change" listener="#{homeGerenciaBean.atualizaReferencia}" render="@all" />
					  	</h:selectOneMenu>
				    </div>
				    
				    <h:panelGroup id="periodoField" rendered="#{homeGerenciaBean.mostrarPeriodo}">
					    <div class="extrato_referencia_p3" align="right">Período:</div>
					    <div class="extrato_referencia_p4">
					    	<h:inputText id="dataini" value="#{homeGerenciaBean.dataIni}" maxlength="10" size="14">
					    		<f:convertDateTime pattern="dd/MM/yyyy"/>
					    	</h:inputText>
					    	<rich:jQuery selector="#formmask\:dataini" query="mask('99/99/9999')" timing="domready" />
					    </div>
					    <div class="extrato_referencia_p5" align="center">a</div>
					    <div class="extrato_referencia_p4">
					    	<h:inputText id="datafim" value="#{homeGerenciaBean.dataFim}" maxlength="10" size="14">
					    		<f:convertDateTime pattern="dd/MM/yyyy"/>
					    	</h:inputText>
					    	<rich:jQuery selector="#formmask\:datafim" query="mask('99/99/9999')" timing="domready" />
					    </div>
				    </h:panelGroup>
				    
				    <div class="extrato_referencia_p2">
				      	<h:selectOneMenu value="#{homeGerenciaBean.cartaoSelecionadoBusca}" converter="cartaoConverter" styleClass="input-style" > 
				      		<f:selectItem itemLabel="Todos" />
							<f:selectItems value="#{homeGerenciaBean.cartoesUsuario}" var="cartao" itemLabel="#{cartao.numeroSimpl}" itemValue="#{cartao}"/> 
					  	</h:selectOneMenu>
				    </div>
				  </div>
				  	<div class="extrato_referencia2" align="right">
				  		<a4j:commandLink action="#{homeGerenciaBean.buscarGCard}" render="@all" execute="@form">
				  			<img src="images/botaobuscar_laranja.jpg" alt="" width="58" height="15" />
				  		</a4j:commandLink>
				  	</div>
				  <div class="historico_1">
				    <div class="historico_1a_left"><strong>Cartão</strong></div>
				    <div class="historico_1_middle2" align="center"><strong>Data</strong></div>
				    <div class="historico_1a_middle1"><strong>Histórico</strong></div>
				    <div class="historico_1a_right" align="right"><strong>Valor R$</strong></div>
				  </div>
				  <div class="historico_2"></div>
				  
				  			<a4j:repeat value="#{homeGerenciaBean.movimentacoes}" var="mov" >
				  
					        		<h:panelGroup rendered="#{mov.branco}" >
					        		
					        			<div class="historico_4">
									    	<div class="historico_3a_left">
									    		<h:outputText value="#{mov.plastico}" />
									    	</div>
									    	<div class="historico_3_middle2" align="center">
									    		<h:outputText value="#{mov.dataLancamento}" >
								            		<f:convertDateTime pattern="dd/MM"/>
								            	</h:outputText>
									    	</div>
									    	<div class="historico_3a_middle1">
									    		<h:outputText value="#{mov.descricaoSimpl}" title="#{mov.descricao}" /> 
									    	</div>
									    	<div class="historico_3a_right" align="right">
									    		<h:outputText value="#{mov.valor}" >
								            		<f:convertNumber type="currency" locale="pt-Br"/>
								            	</h:outputText>
									    	</div>
									  	</div>
			        					
					        		
							        </h:panelGroup>
							        <h:panelGroup rendered="#{!mov.branco}" >
								        
								        <div class="historico_3">
									    	<div class="historico_3a_left">
									    		<h:outputText value="#{mov.plastico}" />
									    	</div>
									    	<div class="historico_3_middle2" align="center">
									    		<h:outputText value="#{mov.dataLancamento}" >
								            		<f:convertDateTime pattern="dd/MM"/>
								            	</h:outputText>
									    	</div>
									    	<div class="historico_3a_middle1" >
									    		<h:outputText value="#{mov.descricaoSimpl}" title="#{mov.descricao}" /> 
									    	</div>
									    	<div class="historico_3a_right" align="right">
									    		<h:outputText value="#{mov.valor}" >
								            		<f:convertNumber type="currency" locale="pt-Br"/> 
								            	</h:outputText>
									    	</div>
									  	</div>
								        
							        </h:panelGroup>
						        
				  			</a4j:repeat>		        



				  
				  
				  	<div class="historico_divisor"></div>
				  	<div class="historico_3">
				    	<div class="historico_3a_left"></div>
				    	<div class="historico_3_middle2" align="center"></div>
				    	<div class="historico_3a_middle1">Total recarga</div>
				    	<div class="historico_3a_right_saldototal" align="right"><strong>
				    		<h:outputText value="#{homeGerenciaBean.recargas}" >
			            		<f:convertNumber type="currency" locale="pt-Br"/>
			            	</h:outputText>
				       </strong></div>
				  	</div>
				  	<div class="historico_3">
				    	<div class="historico_3a_left"></div>
				    	<div class="historico_3_middle2"></div>
				    	<div class="historico_3a_middle1">Total consumo</div>
				    	<div class="historico_3a_right_saldototal" align="right"><strong>
				    		<h:outputText value="#{homeGerenciaBean.consumos}" >
			            		<f:convertNumber type="currency" locale="pt-Br"/>
			            	</h:outputText>	
				    	</strong></div>
				  	</div>
				  	<div class="historico_imprimir" align="right">
				  		<a4j:commandLink action="#{homeGerenciaBean.imprimir}" >
							<img src="images/icones_02.gif" alt="" width="58" height="40" />
						</a4j:commandLink>
				  	</div>
									
				
				
				
				</div>

			</h:form>
		</ui:define>
	</ui:composition>

</html>